<!--
 * @Author: TG
 * @LastEditors: TG
 * @description:
 * @updateInfo: 内容:员工花名册
 * @Date: 2023-10-19 12:08:30
 * @LastEditTime: 2023-10-20 12:08:30
-->

<script lang="ts" setup>
import { _ } from 'iking-utils'
import { useFields } from './fields'
import { organizaApi } from '@/MainApp/apis/organiza'
const { msgError } = useMessage()
const router = useRouter()
const route = useRoute()

const { rosterList } = useFields()

// 返回上个页面
const handleBack = () => {
  router.push(
    {
      path: '/system-manage/organization-manage'
    }
  )
}
// 表格数据
const tableData = ref([{}])
const headCount = ref(0)
const pageData = ref()
const tableSeach = async () => {
  const { success, msg, data, total } = await organizaApi.organizationId({ ...pageData.value, id: route.query.id })
  success && (tableData.value = data)
  headCount.value = total
  if (!success) {
    msgError(msg)
    tableData.value = []
  }
  tableData.value = _.cloneDeep(tableData.value)
}
</script>

<template>
  <IkPageMain fixed>
    <IkPageHeader title="员工花名册" :auto-close="true" @back="handleBack" />
    <IkPageFull
      v-model="pageData"
      :header-title="`员工总人数：${headCount}人`"
      :table-data="tableData"
      :fields="rosterList"
      highlight-current-row
      header-border
      row-key="id"
      :total="headCount"
      :search="tableSeach"
    >
      <template #postsNames="{ data }">
        <p v-for="(item, index) in data.row?.postsNames" :key="index">{{ item }}</p>
      </template>
      <template #departments="{ data }">
        <div style="width: 100%;display: flex;flex-wrap: wrap;">
          <p v-for="(item, index) in data.row.departments" :key="index">{{ item }} ,</p>
        </div>
        <!-- {{ ikArray.listToString(data.row?.departments, index, ', ') }} -->
      </template>
    </IkPageFull>
  </IkPageMain>
</template>
